<template>
  <div class="monitor-quality-chart">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <tag-content-header>
            <template #title>
              <span class="title-text">标签总体质量综合得分</span>
            </template>
          </tag-content-header>
          <div class="quality-chart-wrapper" id="quality-score"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card v-loading="loading">
          <tag-content-header>
            <template #title>
              <span class="title-text">数据质量</span>
            </template>
          </tag-content-header>
          <div class="quality-chart-wrapper" id="quality-data"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card v-loading="loading">
          <tag-content-header>
            <template #title>
              <span class="title-text">应用热度</span>
            </template>
          </tag-content-header>
          <div class="quality-chart-wrapper" id="quality-heat"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card v-loading="loading">
          <tag-content-header>
            <template #title>
              <span class="title-text">业务质量</span>
            </template>
          </tag-content-header>
          <div class="quality-chart-wrapper" id="quality-bussiness"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      loading: false,
      comprehensiveQualityScore: 0,
      dataQuality: {
        excellentCount: 0,
        goodCount: 0,
        caveatCount: 0
      },
      businessQuality: {
        excellentCount: 0,
        goodCount: 0,
        caveatCount: 0
      },
      applicationHeat: {
        excellentCount: 0,
        goodCount: 0,
        caveatCount: 0
      },
      scoreChart: null,
      dataChart: null,
      bussinessChart: null,
      heatChart: null
    }
  },
  methods: {
    getCount() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tag/tagQuality/getComprehensiveTagQuality'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.comprehensiveQualityScore = data.data.comprehensiveQualityScore
          this.dataQuality = Object.assign({}, this.dataQuality, data.data.dataQuality)
          this.businessQuality = Object.assign({}, this.businessQuality, data.data.businessQuality)
          this.applicationHeat = Object.assign({}, this.applicationHeat, data.data.applicationHeat)
          this.initScoreChart()
          this.initChart('dataChart', 'quality-data', 'dataQuality')
          this.initChart('bussinessChart', 'quality-bussiness', 'businessQuality')
          this.initChart('heatChart', 'quality-heat', 'applicationHeat')
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    initScoreChart() {
      if (!this.scoreChart) this.scoreChart = echarts.init(document.getElementById('quality-score'))
      let option = {
        series: [
          {
            type: 'gauge',
            grid: {
              top: 50,
              bottom: 10,
              containLabel: true
            },
            center: ['50%', 160],
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[0.3, '#f98c6a'], [0.7, '#54c6e2'], [1, '#65d496']]
              }
            },
            pointer: {
              itemStyle: { color: 'auto' }
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              color: 'auto',
              distance: 20,
              fontSize: 18
            },
            detail: {
              valueAnimation: true,
              color: 'auto'
            },
            data: [{ value: this.comprehensiveQualityScore }]
          }
        ]
      }
      this.scoreChart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.scoreChart.resize()
      })
    },
    initChart(chartName = '', id = '', fieldName = '') {
      if (!this[chartName]) this[chartName] = echarts.init(document.getElementById(id))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 60,
          bottom: 10,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['优秀', '良好', '预警'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#666'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#666'
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#eee'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '35%',
            itemStyle: {
              borderRadius: [3, 3, 0, 0],
              color: params => {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: params.dataIndex === 0 ? '#45bf7b' : params.dataIndex === 1 ? '#3ab2d0' : '#f1754e'
                  },
                  {
                    offset: 1,
                    color: params.dataIndex === 0 ? '#65d496' : params.dataIndex === 1 ? '#54c6e2' : '#f98c6a'
                  }
                ])
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 17,
                fontWeight: 'bold'
              }
            },
            data: [this[fieldName].excellentCount, this[fieldName].goodCount, this[fieldName].caveatCount]
          }
        ]
      }
      this[chartName].setOption(option, true)
      window.addEventListener('resize', () => {
        this[chartName].resize()
      })
    }
  }
}
</script>

<style lang="scss">
.monitor-quality-chart {
  margin-bottom: 20px;
  .el-card__body {
    padding: 0;
    position: relative;
  }
  .quality-chart-wrapper {
    height: 280px;
  }
  .tag-content-header {
    padding-left: 25px;
    position: absolute;
    top: 10px;
    left: 0;
  }
}
</style>
